<template>
    <div>
        <button @click='add'>+</button>
        <button @click='minus'>-</button>
        <h2>当前数字是{{count}}==={{type}} == {{age}}=={{name}}</h2>
        <!-- <input type="text" v-model="count"> -->
    </div>
</template>
<script>
// @ is an alias to /src
import {mapState,mapGetters,mapMutations,mapActions} from '../store/myvuex'
export default {
    name: 'XXX',
    data() {
        return {
        
        }
    },
    created() {
      console.log(1,this)
      this.fn1(123)
      this.fn2(456)
      this.fn3(789)
    },
    methods: {
      ...mapMutations(['fn1','fn2','fn3']),
      add(){
        // let n = this.$store.state.count++;
        // localStorage.setItem('qqqq',n+1)
        // this.$store.commit('changeCount',1,2,3,4,5)
        // 调用 mutations中的 changeCount 函数 并且 把 1传给了这个函数； 这里只有1 传过去了， 其他的都没传过去
        // 若想传多个参数的时候 可以封装成对象或者数组



        this.$store.dispatch('changeCountFn',1)
        // 调用actions中的changeCountFn 方法，并且把1 传给了这个而函数 这里只有1 传过去了， 其他的都没传过去
        // 若想传多个参数的时候 可以封装成对象或者数组
      },
      minus(){
        console.log(this)
        // let n = this.$store.state.count--
        // localStorage.setItem('qqqq',n-1)
        this.$store.commit('changeCount',-2)
        // this.$store.commit({
        //   type:'changeCount',
        //   n:-1
        // })
      }
    },
    computed: {
      // count(){return this.$store.state.count},
      // age(){return this.$store.state.age},
      // name(){return this.$store.state.name},
      ...mapState(['count','age','name']),
      // count:{
      //   get(){return this.$store.state.count},
      //   set(val){
      //     let n = val - this.$store.state.count;
      //     this.$store.commit('changeCount',n)
      //   }
      // },
      // type(){return this.$store.getters.type}
      ...mapGetters(['type'])
    },
}
</script>
<style lang="less">

</style>